<template>
  <view class="videoContainer">
    <!-- 头部区域 -->
    <view class="header">
      <image src="/static/images/video/video.jpg"></image>
      <view class="search" bindtap="toSearch">搜索音乐</view>
      <image src="@/static/images/logo.png"></image>
    </view>
    <!-- 导航区域 -->
    <scroll-view scroll-x class="navScroll" enable-flex>
      <view class="navItem" v-for="(item, index) in videoGroupList" :key="item.id" @click="changeNav(index, item)">
        <view :class="{ active: navIndex === index, navContent }">{{ item.name }}</view>
      </view>
    </scroll-view>
    <!-- 视频组件 -->
    <my-video :videoList="videoList" @handleRefresher="getVideoList(tabId)" @handleToLower="loadVideoList(tabId)" />
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  data() {
    return {
      // 导航标签数据
      videoGroupList: [],
      // 选中的导航标签索引
      navIndex: 0,
      // 标签视频数据
      videoList: [],
      // 当前点击的标签ID，方便下拉刷新使用
      tabId: 0,
      // 页数
      page: 1
    };
  },
  created() {
    this.getVideoGroupListData();
  },
  methods: {
    // 请求导航标签事件
    async getVideoGroupListData() {
      const res = await request('/video/group/list');
      if (res.code !== 200) {
        return console.log(res);
      }
      this.videoGroupList = res.data.slice(0, 14);
      // 初始化请求第一个标签视频
      this.getVideoList(this.videoGroupList[0].id);
      // 初始化记录第一个标签ID
      this.tabId = this.videoGroupList[0].id;
    },
    // 点击导航标签事件
    changeNav(index, item) {
      // 记录当前点击的标签id
      this.navIndex = index;
      // 请求标签对应视频
      this.getVideoList(item.id);
      // 记录标签ID
      this.tabId = item.id;
      this.page = 1;
    },
    // 刷新标签对应视频事件
    async getVideoList(navId) {
      // 清空列表
      this.videoList = [];
      const res = await request('/video/group', { id: navId });
      this.videoList = res.datas;
    },
    // 上拉加载视频
    async loadVideoList(navId) {
      this.page++;
      const res = await request('/video/group', { id: navId, offset: this.page });
      this.videoList = [...this.videoList, ...res.datas];
    }
  }
};
</script>

<style lang="scss">
/* pages/video/video.wxss */
.videoContainer .header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
}
.videoContainer .header image {
  width: 60rpx;
  height: 60rpx;
}

.videoContainer .header .search {
  border: 1rpx solid #eee;
  /*flex-grow: 可拉伸 flex-shrink： 可压缩 flex-basis: 当前元素的宽度*/
  /*flex默认值: flex-grow: 0, flex-shrink: 1, flex-basis: auto*/
  /*flex:1  flex-grow: 1, flex-shrink: 1, flex-basis: 0%*/
  /*flex:auto  flex-grow: 1, flex-shrink: 1, flex-basis: auto*/
  /*flex: 1会导致父元素宽度自动为100%*/
  flex: 1;
  margin: 0 20rpx;
  font-size: 26rpx;

  color: #d43c33;
}
/* 导航区域 */
.navScroll {
  display: flex;
  white-space: nowrap;
  height: 60rpx;
}

.navScroll .navItem {
  padding: 0 30rpx;
  font-size: 28rpx;
  height: 60rpx;
  line-height: 60rpx;
}
.navScroll .navContent {
  height: 60rpx;
  box-sizing: border-box;
}

.navItem .active {
  border-bottom: 1rpx solid #d43c33;
}
</style>
